<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="auture" content="腾">
        <title></title>
        <style>
            html,body{
                height: 100%;
            }
            body{
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: radial-gradient(white 5%,black 100%);
                
            }
            main{
                width: 1022px;
                height: 494px;
                background-image: url(keys.png);
                border: 5px solid black;
                border-top-width: 50px;
                border-radius: 10px;
            }
            main>div{
                float: left;
                width: calc(100% / 9);
                height: 100%;
            }
            .play{
                background-image: linear-gradient(to bottom,transparent 60%,grey 100%);
            }
        </style>
    </head>
    <body>
        <audio src="`notes/1.oga`"></audio>
        <audio src="`notes/2.oga`"></audio>
        <audio src="`notes/3.oga`"></audio>
        <audio src="`notes/4.oga`"></audio>
        <audio src="`notes/5.oga`"></audio>
        <audio src="`notes/6.oga`"></audio>
        <audio src="`notes/7.oga`"></audio>
        <audio src="`notes/8.oga`"></audio>
        <audio src="`notes/9.oga`"></audio>
        
        <main>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </main>        
    </body>
</html>
<script>
    var audios=document.querySelectorAll("audio");

    // 封装一个方法，播放第i个音频
    function play(i){
        audios[i].load();
        audios[i].play();
    }

    var divlist=document.querySelectorAll("div");
    for(let i=0;i<divlist.length;i++){
        divlist[i].onclick=function(){
            play(i);
        }
        divlist[i].onmousedown=function(){
            divlist[i].className="play";
        }
        divlist[i].onmouseup=function(){
            divlist[i].className="";
        }
    }
    // 点击数字播放
    window.onkeydown=function(event){
        var inputKeyCode=event.keyCode||event.which;
        console.log(inputKeyCode);
        if(inputKeyCode>=49&&inputKeyCode<=57){
            play(inputKeyCode-49);
            console.log(inputKeyCode-49)
            divlist[inputKeyCode-49].className="play";
        }
    }
    window.onkeyup=function(event){
        var inputKeyCode=event.keyCode||event.which;
        if(inputKeyCode>=49&&inputKeyCode<=57){
            divlist[inputKeyCode-49].className="";
        }
    }
</script>
